<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

    <!--时间轴css-->
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <style>
        .row {
            background-color: rgb(255, 255, 255);
            margin-top: 10px;
            margin-right: 3px;
            margin-bottom: 15px;
            padding-left: 24px;
        }

        .col-xs-12 {
            margin-top: 50px;
        }

        span {
            font-size: 14px;
            color: #333333;
            line-height: 50px;
            text-align: left;
        }

        #row2 {
            border-top: 1px solid #e0e2e8;
        }

        #row3 {
            border-top: 1px solid #e0e2e8;
        }

        #row4 {
            border-top: 1px solid #e0e2e8;
        }

        #row5 {
            border-top: 1px solid #e0e2e8;
        }

        #row6 {
            border-top: 1px solid #e0e2e8;
            margin-right: 15px;
        }

        #row7 {
            border-top: 1px solid #e0e2e8;
        }

        #row8 {
            border-top: 1px solid #e0e2e8;
        }

        .yearHoliday {
            padding-left: 36px;
            padding-top: 35px;
        }

        .salaryImg {
            padding-left: 36px;
            padding-top: 7px;
        }

        #cqDetail {
            margin-right: 25px;
        }

        .vertical-timeline-content p {
            line-height: 0.6em;
        }

        .vertical-timeline-content {
            margin-left: 45px;
            padding: 0.6em;
        }

        #myEventCount {
            font-size: 90px;
            margin: 74px 50px 59px 105px;
            color: #3f4f69;
            line-height: 64px;
        }

        #yearHoliday {
            font-size: 90px;
            margin: 74px 50px 59px 105px;
            color: #3f4f69;
            line-height: 64px;
        }

        .exp-blank {
            line-height: 25px;
        }
        #row2 > div > a {
            display: inline-block;
            text-align: center;
            margin-top: 0px;
            width: 89px;
            color: rgb(102, 102, 102);
        }

        #personalInfo > img {
            position: relative;
            display: block;
            left: 40%;
            margin-top: 15px;
            margin-left: -18px;
            border-radius: 38px;
        }

        #personalInfo > :nth-child(2) {
            display: block;
            margin: 0px 27px 6px auto;
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
            font-size: 20px;
            color: #333333;
            text-align: center;
        }

        #personalInfo > :nth-child(3) {
            display: block;
            margin-bottom: 12px;
            margin-top: -25px;
            color: #666666;
            line-height: 12px;
            text-align: center;
            width: 276px;
        }

        .superior {
            float: left;
            margin-top: 8px;
            margin-left: 20px;
            margin-right: 24px;
            border-radius: 38px;
            width: 31px;
            height: 31px;
        }

        #contactInfo > span {
            font-size: 10px;
            text-align: center;
            margin-top: -7px;
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
            margin-left: -37px;
        }
    </style>

<body class="gray-bg" th:with="isAdmin = ${@permission.isRole('administrator') || @permission.isRole('t_admin')}">
<div class="container" style="margin-top: 10px">

    <div class="middle-box text-center animated fadeInDown" th:if="${isAdmin}">
        <div class="error-desc">
            <h2 th:if="${@permission.isRole('administrator')}">超级管理员你好！</h2>
            <h2 th:if="${@permission.isRole('t_admin')}">租户管理员你好！</h2>
            <img th:src="@{/img/indexImg/admin.png}">
        </div>
    </div>

    <div class="col-sm-4" th:if="!${isAdmin}">
        <div class="row">
            <div class="row" id="row1">
                <div class="row" id="personalInfo">
                    <img th:src="${@indexService.getSysUser().getAvatar()}" style="height: 72px; width: 72px;">
                    <!--                            <input th:value="${@permission.getPrincipalProperty('userName')}">-->
                    <!--动态获取用户信息-->
                    <span>[[${@permission.getPrincipalProperty('userName')}]]</span>
                    <!--                            <span>[[${@permission.getUserEmpId()}]]</span>-->
                    <span>
                                <!--部门-->
                                <span style="font-size: 12px">[[${@permission.getPrincipalProperty('dept').deptName}]]</span>		  ｜
                        <!--职位-->
                                <span style="font-size: 12px">[[${@permission.getUserListPost().get(0).postName}]]</span>
                            </span>
                </div>
                <div class="row" id="contactInfo" style="border-top: 1px solid #e0e2e8; padding-top: 20px">
                    <span style="display: block;line-height: 5px;">手机：
                        <span>[[${@permission.getPrincipalProperty('phonenumber')}]]</span>
                    </span>
                    <span style="display: block;line-height: 5px">邮箱：
                        <span>[[${@permission.getPrincipalProperty('email')}]]</span>
                    </span>
<!--                    <span style="margin-bottom: 40px; margin-left: 60px;">信息完整度：-->
<!--                        <div class="progress" title="55.00%" style="cursor: pointer;display: inline-block; width: 100px; margin-bottom: 0px;height: 8px;margin-right: 40px">-->
<!--                            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ng-attr-style="width:{{percent}}%;background: -webkit-linear-gradient(left,#4DDDD9, #388CFF); /* Safari 5.1 - 6.0 */-->
<!--                            background: -o-linear-gradient(right,#4DDDD9,  #388CFF); /* Opera 11.1 - 12.0 */-->
<!--                            background: -moz-linear-gradient(right,#4DDDD9,  #388CFF); /* Firefox 3.6 - 15 */-->
<!--                            background: linear-gradient(right,#4DDDD9,  #388CFF); /* 标准的语法 */-->
<!--                            background-color: #337ab7;-->
<!--                            border-radius: 7px;-->
<!--                            " style="width:55.00%;background: -webkit-linear-gradient(left,#4DDDD9, #388CFF); /* Safari 5.1 - 6.0 */-->
<!--                            background: -o-linear-gradient(right,#4DDDD9,  #388CFF); /* Opera 11.1 - 12.0 */-->
<!--                            background: -moz-linear-gradient(right,#4DDDD9,  #388CFF); /* Firefox 3.6 - 15 */-->
<!--                            background: linear-gradient(right,#4DDDD9,  #388CFF); /* 标准的语法 */-->
<!--                            background-color: #337ab7;-->
<!--                            border-radius: 7px;">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </span>-->
                </div>
                <span style="font-size:14px;color:#333333;letter-spacing:0;line-height:14px;text-align:left;">汇报关系</span>
                <div class="row" style="border-top: 1px solid #e0e2e8; padding-top: 5px">
                    <span style="margin-top: 5px;font-size:12px;color:#333333;letter-spacing:0;line-height:14px;text-align:left;">直接上级</span>
                    <div class="row" style="border-top: 1px solid #e0e2e8;">
                        <div class="row" style="border: 1px solid #e0e2e8; margin-top: 10px">
                            <img th:src="${@indexService.getLeaderAvatar()}" class="superior">
                            <span style="font-size: 12px">[[${@indexService.getDeptById().leader}]]</span>｜
                            <span style="font-size: 12px">[[${@indexService.getDeptById().phone}]]</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="col-sm-4" th:if="!${isAdmin}">-->
        <!--&lt;!&ndash;我的在办&ndash;&gt;-->
        <!--<div class="row">-->
            <!--<span>我的在办</span><br>-->
            <!--<div class="row" id="row3" style="margin-top: 10px;">-->
                <!--<div class="row" style="margin-top: 48px;">-->
                            <!--<span id="myEventCount">-->
                                <!--0-->
                                <!--<span>个</span>-->
                            <!--</span><br/>-->
                    <!--<button type="button" class="btn btn-w-m btn-success" style="margin-left: 80px;">查看</button>-->
                    <!--<br/>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->


    <div class="col-sm-4" th:if="!${isAdmin}">
        <!--当月出勤-->
        <div class="row" style="height: 256px;">
            <span>当月出勤</span><br>
            <div class="row" id="row4" style="height: 196px;margin-bottom: -6px;">
                <div class="row">
                    <div class="row">
                        <div class="col-xs-2" style="margin-top: 50px; margin-left: 30px;">
                            <img th:src="@{/img/indexImg/overtime.png}" style="margin-left: 15px">
                            <div class="col-lg-4" style=" margin-left:-27px; margin-right:-30px; width: 50%" ;>
                                <span style="text-align: center;display: inline-block;width: 110px;">加班<span
                                        style="font-size:36px;color:#388cff;" class="ng-binding">[[${@indexService.getOverTimeHours()}]]</span>小时</span>
                            </div>
                        </div>
                        <div class="col-xs-2" style="margin-top: 50px; margin-left: 60px;">
                            <img th:src="@{/img/indexImg/workerror.png}" style="margin-left: 15px">
                            <div class="col-lg-4" style="margin-left:-34px; width: 30%">
                                <span style="text-align: center;display: inline-block;width: 110px;">异常<span
                                        style="font-size:36px;color:#fb5373" class="ng-binding">[[${@indexService.getErrClockTimes()}]]</span>次</span>
                            </div>
                        </div>
                    </div>

                    <!--<div class="row">-->
                    <!--<div class="col-lg-4" style=" margin-left:-3px; margin-right:-30px; width: 50%" ;>-->
                    <!--<span style="text-align: center;display: inline-block;width: 124px;">加班<span-->
                    <!--style="font-size:36px;color:#388cff;" class="ng-binding">0</span>小时</span>-->
                    <!--</div>-->
                    <!--<div class="col-lg-4" style="margin-left:-15px; width: 30%">-->
                    <!--<span style="text-align: center;display: inline-block;width: 124px;">异常<span-->
                    <!--style="font-size:36px;color:#fb5373" class="ng-binding">[[${@indexService.getErrClockTimes()}]]</span>次</span>-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4" th:if="!${isAdmin}">
        <!--我的在办-->
        <div class="row">
            <span>昨日出勤</span><br>
            <div class="row" id="row6">
                <div class="row">
                    <span class="ng-binding" style="margin-left: 70px;">出勤<span style="font-size: 30px;"
                                                                                class="ng-binding">[[${@indexService.getYesterdayWorkTimes()}]]</span>小时</span>
                </div>

                <div class="row"
                     style="background-color: #f8f9fc; padding-left: 75px; height: 100px; margin-bottom: 0px">
                    <span style="margin-left: -50px" class="ng-binding">[[${@indexService.getYesterdayDate()}]]</span>
                    <span id="cqDetail" style="float: right">
                                <a style="color: #388cff !important">详情</a>
                            </span><br>
                    <span class="ng-binding">[[${@indexService.getYesterdayClockFistClockTime()}]] -----</span>
                    <span class="ng-binding">----- [[${@indexService.getYesterdayClockLastClockTime()}]]</span>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="col-sm-4" th:if="!${isAdmin}">-->
        <!--&lt;!&ndash;我的年假&ndash;&gt;-->
        <!--<div class="row" th:with="yearHoliday = ${@indexService.getAnnualLeave()}">-->
            <!--<span>我的年假</span><br>-->
            <!--<div class="row" id="row7" th:if="${yearHoliday} == '0'">-->
                <!--<div class="row">-->
                    <!--<img class="yearHoliday" th:src="@{/img/indexImg/noannualleave.png}">-->
                <!--</div>-->
                <!--<p style=" font-size: 12px; padding: 5px 0; margin: 0px 100px 10px;">-->
                    <!--无剩余年假！-->
                <!--</p>-->
            <!--</div>-->

            <!--<div class="row" style="margin-top: 48px;" th:if="${yearHoliday} != '0'">-->
                                <!--<span id="yearHoliday">-->
                                    <!--[[${yearHoliday}]]-->
                                    <!--<span>天</span><br/>-->
                                <!--</span><br/>-->
                <!--<br/>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <div class="col-sm-4" th:if="!${isAdmin}">
        <!--常用入口-->
        <div class="row" id="common-function" style="margin-bottom: 10px">
            <span style="padding-bottom: 1px">常用入口</span><br>
            <div class="row" id="row2" style="margin-bottom: 0px">
                <div class="row" style="margin-button: 10px">
                    <a th:href="@{/system/user/profile}">
                        <img th:src="@{/img/indexImg/perdoc.png}">
                        <span>我的个人档案</span>
                    </a>
                    <a th:href="@{/system/leave/toNeedLeave}">
                        <img th:src="@{/img/indexImg/leave.png}">
                        <span>我要请假</span>
                    </a>
                    <a th:href="@{/system/work/toNeedWork}">
                        <img th:src="@{/img/indexImg/workovertime.png}">
                        <span>我要加班</span>
                    </a>
                    <!--<a href="">-->
                    <!--<img th:src="@{/img/indexImg/business_trip.png}">-->
                    <!--<span>我要出差</span>-->
                    <!--</a>-->
                    <!--<a href="">-->
                    <!--<img th:src="@{/img/indexImg/remakcard.png}">-->
                    <!--<span>我要补卡</span>-->
                    <!--</a>-->
                    <a th:href="@{/system/salary/mySalary}">
                        <img th:src="@{/img/indexImg/wages.png}">
                        <span>我的工资条</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="col-sm-4" th:if="!${isAdmin}">-->
        <!--<div class="row">-->
            <!--<span>薪资变化</span><br>-->
            <!--<div class="row" id="row8">-->
                <!--<div class="row">-->
                    <!--<img class="salaryImg" th:src="@{/img/indexImg/nothing.png}">-->
                <!--</div>-->
                <!--<p style=" font-size: 12px; padding: 5px 0; margin: 0px 100px 10px;">-->
                    <!--无薪酬数据！-->
                <!--</p>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
</body>
</html>